<template>
  <div class="reply">
    <!-- 评论列表 -->
    <van-cell>
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <div class="msg">
          <van-image
            round
            width="40px"
            height="40px"
            :src="currentComment.aut_photo"
            fit="cover"
          />
          <div class="info">
            <div>{{ currentComment.aut_name }}</div>
            <div>{{ currentComment.content }}</div>
            <div class="other">
              <span>{{ currentComment.pubdate | timeFilter }}</span>
            </div>
          </div>
        </div>
      </template>
    </van-cell>
    <!-- 分割线 -->
    <div class="div">
      <p>---全部回复---</p>
    </div>
    <!-- reply list -->
    <van-list v-model="loading" :finished="finished" @load="onload">
      <van-cell v-for="(item, index) in list" :key="index">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="msg">
            <van-image
              round
              width="40px"
              height="40px"
              :src="item.aut_photo"
              fit="cover"
            />
            <div class="info">
              <div>{{ item.aut_name }}</div>
              <div>{{ item.content }}</div>
              <div class="other">
                <span>{{ item.pubdate | timeFilter }}</span>
              </div>
            </div>
          </div>
        </template>
      </van-cell>
    </van-list>
    <!-- 回复输入框 -->
    <van-field
      v-model="content"
      center
      clearable
      placeholder="请输入评论"
      class="bottom"
      @keyup.enter="sendReplay"
    >
      <template #button>
        <van-button size="small" type="info" @click="sendReplay"
          >发布</van-button
        >
      </template>
    </van-field>
  </div>
</template>

<script>
import { getCommentsApi, setCommentsApi } from '@/api'
export default {
  data () {
    return {
      loading: false,
      finished: false,
      list: [],
      content: '',
      offset: undefined,
      end_id: null
    }
  },
  // props属性接受父组件中传递过来从数据currentComment,渲染数据到结构
  props: {
    currentComment: {
      type: Object,
      required: true
    }
  },
  methods: {
    async onload () {
      const res = await getCommentsApi({
        type: 'c',
        source: this.currentComment.com_id,
        offset: this.offset,
        limit: 5
      })
      // 保存数据
      this.list = [...this.list, ...res.data.data.results] // 切记要用数组的展开式不能直接赋值
      this.offset = res.data.data.last_id
      this.end_id = res.data.data.end_id
      this.loading = false
      if (this.end_id === this.offset) {
        this.finished = true
      }
      console.log(res)
    },
    async sendReplay () {
      // 非空判断
      if (this.content.trim === '') {
        return (this.content = '')
      }
      // 将获取到输入框中的内容追加到List列表中
      const res = await setCommentsApi({
        target: this.currentComment.com_id,
        content: this.content,
        art_id: this.$route.query.id
      })
      // console.log(res.data)
      // 将数据追加到list列表
      this.list.unshift(res.data.data.new_obj)
      // 手动将replay_count数量+1

      this.currentComment.reply_count += 1
      // 清空输入框
      this.content = ''
    }
  }
}
</script>

<style lang="less">
.reply {
  .div {
    font-size: 14px;
    color: #999;
    text-align: center;
  }
  .info {
    flex: 1;
    margin: 0 10px;
    .other {
      margin-top: 20px;
      display: flex;
      align-items: center;
      .btn {
        margin-left: 10px;
      }
    }
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>
